{% extends 'base.html' %}
{% block title %}查询部门{% endblock %}
{% block content %}
<div class="container">
    <!-- 批量添加 -->
    <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
            批量添加
        </div>
        <div class="panel-body" style="padding: 20px; background-color: #fffafa;">
            <form method="post" action="{% url 'dept_batchadd' %}" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    <label for="file" style="color: #ff6b81; font-weight: 500;">上传部门信息文件（Excel）:</label>
                    <input type="file" name="excel_file" id="file" class="form-control" style="border: 1px solid #ffc2c4; border-radius: 5px;" />
                </div>
                <button class="btn" style="background-color: #ff6b81; color: white; border-radius: 5px; padding: 10px 20px; font-size: 14px; font-weight: 500;">批量添加</button>
            </form>
        </div>
    </div>

    <!-- 搜索和添加按钮 -->
    <div style="margin-bottom: 15px;">
        <a href="{% url 'dept_add' %}" class="btn" style="background-color: #ff8fa3; color: white; border-radius: 5px; padding: 10px 20px; font-weight: 500;">添加部门</a>
        <form style="float: right; width: 300px;">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="搜索部门..." style="border: 1px solid #ffc2c4; border-radius: 5px;" />
                <span class="input-group-btn">
                    <button class="btn" style="background-color: #ff6b81; color: white; border-radius: 5px;">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </form>
    </div>

    <!-- 部门信息列表 -->
    <div class="panel panel-default" style="border: 1px solid #ffc2c4; border-radius: 8px;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-weight: 600; font-size: 16px; border-radius: 8px 8px 0 0;">
            <span class="glyphicon glyphicon-th-list"></span> 部门信息列表
        </div>
        <div class="panel-body" style="padding: 0; background-color: #fffafa;">
            <table class="table table-bordered table-striped table-hover" style="margin: 0;">
                <thead style="background-color: #ff8fa3; color: white; font-weight: 500; font-size: 14px;">
                    <tr>
                        <th>部门编号</th>
                        <th>部门名称</th>
                        <th>地址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {% for dept in dept_list %}
                <tr style="background-color: #fff;">
                    <td>{{ dept.deptno }}</td>
                    <td>{{ dept.dname }}</td>
                    <td>{{ dept.loc }}</td>
                    <td>
                        <a href="{% url 'dept_delete' %}?deptno={{ dept.deptno }}" class="btn btn-xs" style="background-color: #ff6b81; color: white; border-radius: 5px; padding: 5px 10px; font-size: 12px;">删除</a>
                        <a href="{% url 'dept_update' %}?deptno={{ dept.deptno }}" class="btn btn-xs" style="background-color: #ff8fa3; color: white; border-radius: 5px; padding: 5px 10px; font-size: 12px;">修改</a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" style="text-align: center; color: #ff6b81; font-weight: 500;">暂无部门信息</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页 -->
    <div style="text-align: center; margin-top: 15px;">
        {{ page_str }}
    </div>
</div>
{% endblock %}
